
// 表盘实际夹角为63，每增加一度数值加3 初始角度为70；

import { defineComponent, ref, onMounted, watch, onUnmounted } from 'vue'
import SvgIcon from '../SvgIcon/index.vue'

import './index.less'
export default defineComponent({
  props: {
    direction: {
      type: Number,
      default: 1 // 1 右边 -1左边
    },
    step: {
      type: Number,
      default: 3
    },
    value: {
      type: [Number, String]
    },
    title: {
      type: String
    }
  },
  setup(props) {
    let canvasHeight = ref(0)
    let canvasWidth = ref(0)
    const { direction, step } = props
    const radius = 135
    const containerRef = ref(null)
    let canvas = null
    let ctx = null
    const textRadius = 155
    let prevVal = 0
    function initCavans() {
      const parent = containerRef.value
      if (!canvas) {
        canvas = document.createElement('canvas')
        parent.appendChild(canvas)
        ctx = canvas.getContext('2d')
      }
      canvas.height = canvasHeight = parseFloat(getComputedStyle(parent).height)
      canvas.width = canvasWidth = parseFloat(getComputedStyle(parent).width)
    }
    function drawEcharts(initVal, changeStep, target) {
      if (!ctx) return
      const val = initVal + changeStep
      let deflectionAngle = (val / step * 3) % 60
      if (deflectionAngle < 0) deflectionAngle += 60
      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
      ctx.strokeStyle = '#8EA8D5'
      ctx.lineWidth = 2
      for (let i = 0; i < 20; i++) {
        let len = 8
        if (i % 5 == 0) {
          len = 16
        }
        const deg = direction * (60 + (i * 3 + deflectionAngle) % 60) * 2 * Math.PI / 360
        const x = direction > 0 ? 0 : canvasWidth
        const firstPoint = [direction * Math.sin(deg * direction) * radius + x, -Math.cos(deg) * radius + canvasHeight / 2]
        const secondPoint = [direction * Math.sin(deg * direction) * (radius + len) + x, -Math.cos(deg) * (radius + len) + canvasHeight / 2]
        ctx.beginPath()
        ctx.moveTo(...firstPoint)
        ctx.lineTo(...secondPoint)
        ctx.stroke()
      }
      ctx.restore()
      const centerVal = Math.round(val / (5 * step)) * 5 * step
      ctx.translate(direction > 0 ? 0 : canvasWidth, canvasHeight / 2)
      ctx.textAlign = 'center'
      ctx.font = '16px sans-serif'
      ctx.fillStyle = '#DBF3FE'
      // ctx.rotate(direction * 60 * 2 * Math.PI / 360)
      ctx.rotate(direction * 60 * 2 * Math.PI / 360)
      for (let index = 0; index < 4; index++) {
        ctx.save()
        const tempDeg = (index * 15 + deflectionAngle) % 60
        const text = -Math.round((tempDeg - 30) / (5 * 3)) * 5 * step + centerVal
        const textDeg = direction * tempDeg * 2 * Math.PI / 360
        ctx.rotate(textDeg)
        ctx.fillText(text, 0, -textRadius)
        ctx.restore()
      }
      ctx.restore()
      if (changeStep == 0) {
        return
      } else if (changeStep < 0) {
        if (val <= target) return
      } else {
        if (val >= target) return
      }
      requestAnimationFrame(() => {
        drawEcharts(val, changeStep, target)
      })
    }
    // let dataSource=inject("droneInfo");
    // setInterval(()=>{showValue.value=showValue.value-0.1}, 1000)
    // let showValue=ref(0)
    watch(
      () => props.value,
      (val, oldVal) => {
        prevVal = parseFloat(oldVal)
        const changeStep = (val - oldVal) / 20
        drawEcharts(parseFloat(oldVal), changeStep, val)
      }
    )
    const resizeFun = () => {
      initCavans()
      drawEcharts(prevVal || 0, (props.value - prevVal || 0) / 20, props.value)
    }
    onMounted(() => {
      resizeFun()
      window.addEventListener('resize', resizeFun)
      onUnmounted(() => {
        window.removeEventListener('resize', resizeFun)
      })
    })
    const arrowClass = `arrow ${direction > 0 ? 'right-arrow' : 'left-arrow'}`
    const iconClass = direction > 0 ? 'right_error_arrow' : 'left_error_arrow'
    const titleClass = `title ${direction > 0 ? 'right-title' : 'left-title'}`
    return () => (
      <div class='number-dial' ref={containerRef}>
        <SvgIcon iconClass={iconClass} class={arrowClass} />
        <div class={titleClass}>{props.title}</div>
      </div>
    )
  }
})

